<template>
  <div>

    <el-container>
      <!-- 头-->
      <el-header style="padding: 0;height: 90px;min-width: 1200px">
        <div style="height: 45px;background-color: #009bb3;">
          <span style="font-family: 'Microsoft YaHei';position: absolute; left: 45%;font-size: 27px;line-height: 45px; color: white;font-weight: bold;">新冠物资管理</span>
          <span style="float: right;font-size: 15px">欢迎{{user.username}}回来!
            <a href="javascript:void(0)" @click="logout()">退出登录</a>
          </span>
        </div>

        <div style="margin: 0 auto;height: 61px;padding: 0;width: 850px">
          <el-menu class="el-menu-demo" mode="horizontal" index="/home" default-active="/home/index" router="true">
            <el-menu-item index="/home">
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/home/item/info">
              <span>物资信息</span>
            </el-menu-item>
            <el-menu-item index="/home/item/apply">
              <span>物资申请</span>
            </el-menu-item>
            <el-menu-item index="/home/item/donation">
              <span>物资捐献</span>
            </el-menu-item>
            <el-menu-item index="/home/bbs">
              <span>疫情论坛</span>
            </el-menu-item>
            <el-menu-item index="/home/news">
              <span>疫情咨讯</span>
            </el-menu-item>
            <el-menu-item index="/home/message">
              <span>留言反馈</span>
            </el-menu-item>
            <el-menu-item index="/home/user/info">
              <span>个人中心</span>
            </el-menu-item>
            <el-menu-item :index=url :route={path:url,query:{roleId:user.roleId}}>
              <span>后台管理</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-header>


      <!-- 身体-->
      <el-main style="min-width: 1200px;padding: 0;margin-top: 30px">
        <router-view :key="$route.fullPath"/>
      </el-main>


      <el-footer style="padding: 0">
        <div>
          <el-divider></el-divider>
        </div>
        <div style=";height: 100px;
                         font-size: 14px;color: #4b4949;
                         text-align: center;padding: 30px">
          <p>中国物资分配控制中心 版权所有 版权与免责声明 京ICP备11024750号-1</p>
          <p>中国疾控中心信息中心 内容管理与技术支持 建议使用1366*768 分辨率，IE9.0以上浏览器</p>
          <p>地址：杭州市西湖区紫金花路110号 丨 邮编：310000 丨 行政值班电话：010-58900001 丨 健康咨询电话：12320</p>
        </div>
      </el-footer>
    </el-container>

  </div>
</template>

<script>
    export default {
        data() {
            return {
                jwt: this.$route.query.jwt,
                url:"",
                user:{
                    id:"",
                    username:"",
                    name:"",
                    idNumber:"",
                    age:"",
                    phone:"",
                    email:"",
                    isEnable:"",
                    roleId:""
                },
            }
        },
        created() {
            this.getData();
        },

        methods: {
            getData(){
                this.user = JSON.parse(localStorage.getItem('user'))
                //拿到orleId之后判断值,指定后台管理的
                if (this.user.roleId === 3){
                    this.url="/user"
                }else {
                    this.url="/admin"
                }
            },
            logout(){
                localStorage.removeItem('JWT_TOKEN')
                localStorage.removeItem('user')
                this.$router.push({path: '/login'});  //页面路由刷新
            },
        },
    }
</script>


<style>
    div{
      font: 14px "Microsoft YaHei UI";
      margin: 0;
    }
    .el-menu--horizontal>.el-menu-item.is-active {
        border: none;
    }

</style>